<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :border="false">
      <!-- 回调地址 -->
      <!-- <a-alert style="margin:0 0 15px;" v-if="info"  :message="'测试回调：' + info" type="info" /> -->
      <!-- 测试回调地址 -->
      <!-- 授权回调地址 -->
      <!-- <div class="tar">
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="importData(1)">导入用户 </a-menu-item>
            <a-menu-item key="2" @click="importData(2)">导入商品 </a-menu-item>
          </a-menu>
          <a-button> 导入 <a-icon type="down" /> </a-button>
        </a-dropdown>
      </div> -->

      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
        <!-- <a-form-model-item label="api_host" prop="api_host" help="例如：https://area11-win.pospal.cn:443">
          <a-input v-model="form.api_host" placeholder="请输入api_host" />
        </a-form-model-item> -->

        <a-form-model-item label="app_key" prop="app_key">
          <a-input v-model="form.app_key" placeholder="请输入app_key" />
        </a-form-model-item>

        <a-form-model-item label="app_secret" prop="app_secret">
          <a-input v-model="form.app_secret" placeholder="请输入app_secret" />
        </a-form-model-item>

        <a-form-model-item label="tag" prop="tag">
          <a-input v-model="form.tag" placeholder="请输入tag" />
        </a-form-model-item>

        <a-form-model-item label="回调地址">
          <a-button @click="onCopy(form.url_callback)" type="link">{{ form.url_callback }}</a-button>
        </a-form-model-item>
        <a-form-model-item label="测试回调地址">
          <a-button @click="onCopy(form.url_callback_test)" type="link">{{ form.url_callback_test }}</a-button>
        </a-form-model-item>
        <a-form-model-item label="授权回调地址">
          <a-button @click="onCopy(form.url_callback_auth)" type="link">{{ form.url_callback_auth }}</a-button>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
          <a-button type="primary" @click="submitForm" :loading="modalLoading"> 保存 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>

    <!-- 导入的弹窗 -->
    <!-- <a-modal v-model="visible_upload" :title="getImportTitle" @ok="handleUpload" :afterClose="closeModel_upload">
      <div style="padding: 10px">
        <span style="color: red">*</span><span class="m_l_5">EXCEL文件 : </span>
        <a-upload
          class="m_l_10"
          :file-list="fileList2"
          :remove="(e) => this.handleRemove(e, 'zip')"
          :before-upload="(e) => this.beforeUpload(e, 'zip')"
        >
          <a-button> <a-icon type="upload" /> 上传 </a-button>
        </a-upload>
      </div>
      <div style="color: red">{{ excelName }}</div>
      <div style="padding: 70px 10px 10px; text-align: center">
        <a-button @click="downloadFile"> <a-icon type="download" /> 下载模板 </a-button>
      </div>
    </a-modal> -->
  </page-header-wrapper>
</template>

<script>
import mytApi from '@/api/maiyatian'
export default {
  data() {
    return {
      modalLoading: false,
      form: {
        app_key: '',
        api_secret: '',
        tag: '',
      },
      rules: {
        app_key: [{ required: true, message: '请输入app_key', trigger: 'blur' }],
        app_secret: [{ required: true, message: '请输入app_secret', trigger: 'blur' }],
        tag: [{ required: true, message: '请输入tag', trigger: 'blur' }],
      },
    }
  },

  methods: {
    // 表单提交
    submitForm() {
      this.$refs.ruleForm.validate(async(valid) => {
        console.log(
          valid
        );
        if (valid) {
          this.modalLoading = true
          let { form } = this
          await mytApi.maiyatianconfSave({
            conf: {
              app_key:form.app_key,
              app_secret:form.app_secret,
              tag:form.tag,
            }
          })
          this.modalLoading = false
          this.$message.success('保存成功')
          this.getData()
        }
      })
    },

    async getData() {
      const res = await mytApi.maiyatianConf()

      if (res.code === 0) {
        this.form = res.data
      }
    },
    onCopy(text) {
      // 创建一个临时的textarea元素
      var tempTextArea = document.createElement('textarea')
      // 将要复制的文本设置为textarea的value值
      tempTextArea.value = text
      // 将textarea添加到DOM树中
      document.body.appendChild(tempTextArea)
      // 选中textarea中的文本
      tempTextArea.select()
      // 执行复制命令
      document.execCommand('copy')
      // 删除临时的textarea元素
      document.body.removeChild(tempTextArea)
      this.$message.success('复制成功')
    }
  },

  mounted() {
    this.getData()
  },
}
</script>

<style lang="less" scoped>
.title {
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
}
.tip {
  font-size: 14px;
  color: #8c8c8c;
  display: block;
}
</style>
